<template>
  <div class="mainbody">
    <el-carousel
      :autoplay="false"
      arrow="always"
      style="height: 100%"
      @change="changeTitle"
      trigger="click"
    >
      <el-carousel-item v-for="(item, index) in chart" :key="index">
        <!-- 显示区域 -->
        <template v-if="item.key == 0">
          <div :id="'main_' + item.key">{{ item.key }}</div>
        </template>
        <template v-if="item.key == 1">
          <div :id="'main_' + item.key">{{ item.key }}</div>
        </template>
        <template v-if="item.key == 2">
          <div class="tab_div">
            <p>{{ item.title }}</p>
            <el-table :data="tableData" stripe style="width: 100%" height="400">
              <el-table-column prop="date" label="发现日期" align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="漏洞名称"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="漏洞等级" align="center">
              </el-table-column>
              <el-table-column prop="date" label="涉及系统" align="center">
              </el-table-column>
              <el-table-column prop="name" label="系统负责人" align="center">
              </el-table-column>
              <el-table-column prop="address" label="状态" align="center">
              </el-table-column>
              <el-table-column prop="date" label="延期时间" align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50]"
              :page-size="10"
              layout=" sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </template>
        <template v-if="item.key == 3">
          <div class="tab_div">
            <p>{{ item.title }}</p>
            <el-table :data="tableData" stripe style="width: 100%" height="400">
              <el-table-column prop="date" label="日期" align="center">
              </el-table-column>
              <el-table-column
                prop="name"
                label="漏洞名称"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="排查结果"
                width="120"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.address }}
                </template>
              </el-table-column>
              <el-table-column prop="date" label="涉及系统" align="center">
              </el-table-column>
              <el-table-column prop="name" label="系统负责人" align="center">
              </el-table-column>
              <el-table-column prop="address" label="状态" align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50]"
              :page-size="10"
              layout=" sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </template>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      currentPage4: 4,
      activeChart: 0,
      chart: [
        { title: "生产漏洞修复进度", key: 0 },
        { title: "sca漏洞修复进度", key: 1 },
        { title: "渗透测试延期漏洞统计", key: 2 },
        { title: "监管通报漏洞统计", key: 3 },
      ],
      myChart: null,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  created() {},
  mounted() {
    this.$nextTick(() => {
      this.myChartInfo(0);
    });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    changeTitle(val) {
      this.activeChart = val;
    },
    myChartInfo(val) {
      if (val > 1) return; //大于1不显示图表，只显示表格
      this.$nextTick(() => {
        let chart = document.getElementById("main_" + val);
        if (
          this.myChart != null &&
          this.myChart != "" &&
          this.myChart != undefined
        )
          this.myChart.dispose(); //销毁

        this.myChart = echarts.init(chart);
        // 展示数据
        const data = [
          { name: "数据1", valueA: 10, valueB: 20, valueC: 30 },
          { name: "数据2", valueA: 15, valueB: 25, valueC: 35 },
          { name: "数据3", valueA: 20, valueB: 30, valueC: 40 },
        ];
        //这里的val用来确定目前显示什么内容
        let option = {
          // 设置图表的标题
          title: {
            text: `${this.chart[val].title}`,
            left: 10,
            textStyle: {
              color: "cornflowerblue",
              fontWidth: 700,
            },
          },
          // 设置图表的提示框组件
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
          },
          // 设置图表的图例组件
          legend: {
            data: ["A", "B", "C"],
            show: false,
          },
          // 设置图表的 x 轴配置
          xAxis: {
            type: "category",
            data: data.map((item) => item.name),
          },
          // 设置图表的 y 轴配置
          yAxis: {
            type: "value",
          },
          // 设置图表的系列（数据列）
          series: [
            {
              name: "A",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueA),
            },
            {
              name: "B",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueB),
            },
            {
              name: "C",
              type: "bar",
              stack: "total",
              data: data.map((item) => item.valueC),
            },
          ],
        };
        this.myChart.setOption(option);
        window.addEventListener("resize", function () {
          this.myChart.resize();
        });
      });
    },
  },
  watch: {
    activeChart: {
      handler(val) {
        this.$nextTick(() => {
          this.myChartInfo(val);
        });
      },
      deep: true,
    },
  },
  computed: {},
};
</script>

<style scoped>
* {
  /* 初始化 清除页面元素的内外边距 */
  padding: 0;
  margin: 0;
  /* 盒子模型 */
  box-sizing: border-box;
}
.mainbody {
  background: #ccc;
  height: 70%;
  width: 100%;
}
#main_0,
#main_1,
#main_2,
#main_3 {
  margin-top: 15px;
  height: 90% !important;
  width: 100% !important;
}
.tab_div {
  margin-top: 5px;
}
.tab_div > p {
  margin: 10px;
  font-size: 18px;
  font-weight: 700;
  color: cornflowerblue;
}
::v-deep .el-carousel__container {
  width: 100%;
  height: 100% !important;
}
.el-carousel__item {
  height: 100% !important;
}
.el-pagination {
  background: #fff;
  text-align: end;
  padding: 5px;
}
.el-table {
  max-height: 400px;
  overflow: auto;
}
</style>